/**
 * 为了解决自定义hook无法监听token变化的问题，使用context来监听token变化
 */

import { createContext, useContext, useState } from 'react'
import { getStorageToken, storeStorageToken, removeStorageToken } from '@/utils/token'

// 创建上下文
const TokenContext = createContext()

// 提供全局状态的Provider组件
export const TokenProvider = ({ children }) => {
  // 全局唯一的token状态
  const [token, setToken] = useState(getStorageToken())

  // 存储token（同步到localStorage和全局状态）
  const storeToken = (newToken) => {
    storeStorageToken(newToken)
    setToken(newToken || null)
  }

  // 删除token（同步到localStorage和全局状态）
  const removeToken = () => {
    removeStorageToken()
    setToken(null)
  }

  return (
    <TokenContext.Provider value={{ token, storeToken, removeToken }}>
      {children}
    </TokenContext.Provider>
  )
}

// 自定义Hook：从上下文获取token状态（供组件使用）
export const useToken = () => {
  const context = useContext(TokenContext)
  if (!context) {
    throw new Error('useToken must be used within a TokenProvider')
  }
  return context
}